<template>
	<el-row class="firstType">
		<div class="div1">
			<div class="div1-1">
				<p class="div1-1-p1"><i class="el-icon-s-data"></i>商品一级类型</p>
			</div>
			<el-button class="addhotpic"><i class="el-icon-document-delete"></i>添加一层类型</el-button>
			<button><i class="el-icon-refresh-right"></i></button>
		</div>
		
		<hr>
		
		<el-table :data="typeList" border
					style="width: 100%; margin-top: 20px;">
					<el-table-column prop="id" label="一级类型ID">
					</el-table-column>
		
					<el-table-column prop="prio" label="顺序">
					</el-table-column>
		
					<el-table-column prop="name" label="一级类型名称">
					</el-table-column>
	
		
					<el-table-column prop="" label="管理" class="adm">
						<div style="display: flex; margin-left: 50px;">
							<el-button class="btnSet"><i class="el-icon-edit"></i>修改</el-button>
						</div>
					</el-table-column>
					
					<el-table-column prop="hot" label="二级节点信息">
					</el-table-column>
					
				</el-table>
		
	</el-row>
</template>

<script>
	export default {
		name:'FirstType',
		data() {
			return{
				typeList:[],
			}
		},
		mounted() {
			this.$get("/api/adm/type/findAll2")
			.then((resp)=>{
				console.log(resp.data);
				this.typeList = resp.data.data;
			})
		}
	}
</script>

<style scoped>
	.firstType {
		margin-left: 20px;
		width: 100%;
		height: 600px;
		line-height: 50px;
	}
	
	.div1 {
		margin-top: 18px;
		display: flex;
		justify-content: space-between;
		margin-bottom: -9px;
	}
	
	.div1-1 {
		display: flex;
	}
	
	.div1-1-p1 {
		font-size: 18px;
	}
	
	.div1 .addhotpic {
		width: 300px;
		color: white;
		background-color: #87ceeb;
	}
	
	.div1 button {
		background-color: #189F92;
		border: none;
		width: 55px;
		height: 38px;
		margin-top: 7px;
		border-radius: 2px;
	}
	
	/* 刷新图标 */
	.el-icon-refresh-right {
		color: white;
		font-size: 22px;
	}
	
	.firstType hr {
		border: 1px gainsboro solid;
	}
	.btnSet {
		background-color: skyblue;
		color: white;
		border: none;
		height: 35px;
		width: 80px;
		/* margin-left: 30px; */
		border-radius: 3px;
	}
</style>
